<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<html>
<head>
	<style type="text/css">
		#allmap {width: 200px;height: 200px;overflow: hidden;margin:0;font-family:"微软雅黑";}
	</style>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=B9YEH6ki5kCtMqXcwixauegNEeaZqCkI"></script>
<title>SCUhotel</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
<link href="/css/bootstrap.css" rel='stylesheet' type='text/css' />
<link href="/css/style.css" rel='stylesheet' type='text/css' />
<!-- Custom Theme files -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Hotel Deluxe Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!--webfont-->
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="/js/login.js"></script>
</head>
<body>
<div class="header">
		   <div class="col-sm-8 header-left">
					 <div class="logo">
						<a href="/"><img src="/images/logos.png" alt=""/></a>
					 </div>
	    		    <div class="clearfix"></div>
	    	    </div>
	                <div class="clearfix"></div>
</div>

   <!--single start here-->
		 <div class="single" style="margin: auto"  >
             <div style="margin:0 150px 0 150px">
			<div class="col-md-6 container>
			<div class=" sing" >  <!--th:object="${hotel}-->
				<div class="single-grid">
                    <div id="demo" class="carousel slide" data-ride="carousel">
                    <style>
                            .carousel-indicators li {
                                position: relative;
                                -ms-flex: 0 1 auto;
                                flex: 0 1 auto;
                                width: 30px;
                                height: 3px;
                                margin-right: 3px;
                                margin-left: 3px;
                                text-indent: -999px;
                                background-color: rgba(255, 255, 255, 0.5);
                            }
                            .carousel-indicators li::before {
                                position: absolute;
                                top: -10px;
                                left: 0;
                                display: inline-block;
                                width: 100%;
                                height: 10px;
                                content: "";
                            }
                            .carousel-indicators .active {
                                width: 30px;
                                height: 3px;
                            }

                        </style>
                        <!-- 指示符 -->
                        <ul class="carousel-indicators">
                            <li data-target="#demo" data-slide-to="0" class="active"></li>
                            <li data-target="#demo" data-slide-to="1"></li>
                            <li data-target="#demo" data-slide-to="2"></li>
                            <li data-target="#demo" data-slide-to="3"></li>
                        </ul>

                        <!-- 轮播图片 -->
                        <div class="carousel-inner">
                            <div class="carousel-item active">
                                <img class="hotel-img" th:src="${hotel.hotelPhoto1}" alt="1" >
                            </div>
                            <div class="carousel-item">
                                <img class="hotel-img" th:src="${hotel.hotelPhoto1}" alt="2" >
                            </div>
                            <div class="carousel-item">
                                <img class="hotel-img" th:src="${hotel.hotelPhoto1}" alt="3" >
                            </div>
                             <div class="carousel-item">
                                <img class="hotel-img" th:src="${hotel.hotelPhoto1}" alt="4" >
                            </div>
                        </div>

                        <!-- 左右切换按钮 -->
                        <a class="carousel-control-prev" href="#demo" data-slide="prev">
                            <span class="carousel-control-prev-icon"></span>
                        </a>
                        <a class="carousel-control-next" href="#demo" data-slide="next">
                            <span class="carousel-control-next-icon"></span>
                        </a>

                    </div>
                </div>

                <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
                <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
                <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>


					<div class="lone-line">
                        <h2 class="hotel-name" th:text="${hotel.getHotelName()}"></h2>
                        <p th:text=" '&nbsp&nbsp'+${hotel.getHotelDesc()}"></p>
					</div>
				</div>

			</div>

            <div class="single-profile" th:if="${rooms}" style="padding: 0px">
            </div>
                <div class="col-md-6 categories-grid" >
				<div class="grid-categories">
					<h4>详细信息</h4>
					<ul class="popular ">
						<li><a href="#"><i class="glyphicon glyphicon-ok" th:text=" '城    市: '+ ${hotel.getHotelLocation()}"> </i></a></li>
						<li><a href="#"><i class="glyphicon glyphicon-ok" th:text=" '酒店星级: '+ ${hotel.getHotelLevel()}+'星' "> </i></a></li>
                        <li><a href="#"><i class="glyphicon glyphicon-ok" th:text=" '酒店电话: '+ ${hotel.getHotelTel()}"> </i></a></li>
					</ul>
				</div>
                    <div style="width: 600px; height: 300px; overflow: hidden;"><div class="grid-categories" id="allmap"></div></div>
                    <script type="text/javascript">
                        // 百度地图API功能
                        var map = new BMap.Map("allmap");    // 创建Map实例
                        map.centerAndZoom(new BMap.Point([[${hotel.hotelLongtitude}]], [[${hotel.hotelLatitude}]]), 16);  // 初始化地图,设置中心点坐标和地图级别
                        //添加地图类型控件
                        map.addControl(new BMap.MapTypeControl({
                            mapTypes:[
                                BMAP_NORMAL_MAP,
                                BMAP_HYBRID_MAP
                            ]}));
                        map.setCurrentCity([[${hotel.hotelLocation}]]);          // 设置地图显示的城市 此项是必须设置的
                        map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
                    </script>
			</div>
				<div class="clearfix"> </div>
             </div>
			</div>
	</div>
<em form=""></em>

<div class="single-profile" th:if="${rooms.size()>0}" style="margin: 0 150px 500px 150px">
    <h4> Rooms</h4>
    <div class="single-left ">
        <div class="display" th:each="room : ${rooms}"> <!--th:each="room : ${rooms}"-->
            <div class="col-md-3 post-top">
                <img class="img-responsive " th:src=" '/images/p0'+${roomStat.index}+'.jpg' "  alt="">   <!--直接显示示例图片-->
                <h6 th:text="${room.getCategory()}"></h6>
                <p th:text="'还剩'+${room.getPcnt()}+'间'"></p>
                <!-- 检查是否登录-->
                <a class="btn3" th:if="${session.user==null}"  onclick="notLogin()" >预订</a>
                <a class="btn3" th:if="${session.user}" th:href=" '/order/buy?hotelId='+${hotel.hotelId} + '&roomId='+${room.getRoomId()}"  >预订</a>
                <p class="price" th:text=" '¥'+ ${room.getPrice()}"></p>
            </div>
        </div>
    </div>
</div>



<!--//single end here-->
<div class="footer">
    <div class="container"></div>
    <div class="footer_top">
        <h3>&nbsp;</h3>
        <h3>四川大学酒店订购系统</h3>
        <h3>Team 22</h3>
    </div>
</div>
</body>
</html>		